<script setup>
import VerticalCard from "@/components/user_cover/VerticalPersonCard.vue";
import CrossCard from "@/components/user_cover/CrossPersonCard.vue";
import { getUserInfo } from "@/api/people/select_user";

const props = defineProps({

  /**
   * 弹出方向
   * 可选值 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
   */
  placement: {
    type: String,
    default: 'bottom-start'
  },

  /**
   * 人员ID，获取信息确认角色来显示不同弹出样式和相关信息
   */
  personId: {
    type: String
  },

  /**
   * 卡片类型，横向或竖向
   */
  type: {
    type: String,
    default: '0'
  }
})

let userInfo = undefined;
getUserInfo(props.personId).then((data) => {
  userInfo = data;
})

let popWidth = undefined;
switch (props.type) {
  case '0':
    popWidth = '15rem';
    break;
  case '1':
    popWidth = '25rem';
    break;
}

</script>

<template>
  <div class="box">
    <el-popover
        :placement="placement"
        :width="popWidth"
        trigger="hover"
        popper-style="padding: 0"
    >
      <template #reference>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </template>

      <div class="hover-box">
        <div v-if="type === '0'">
          <VerticalCard></VerticalCard>
        </div>
        <div v-else>
          <CrossCard></CrossCard>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.box .el-avatar {
  width: auto;
  height: 70%;
  cursor: pointer;
}

.hover-box {
  width: 100%;
  height: 100%;
}
</style>